<template>
	<view class="content">
		<my_navbar_ext height="50" bg-color="#ffffff">
			<view class="pr">
			   <u-tabs-swiper ref="tabs1" :current="current" @change="tabsChange" :list="tagsList" :is-scroll="false"></u-tabs-swiper>
		       <view v-if="$vuex.state.globalData.groupApplicationCount > 0" class="info-number">{{$vuex.state.globalData.groupApplicationCount}}</view>
			</view>
		</my_navbar_ext>
		<view v-if="show_main" class="main" >
			<view :class="current == 0 ?  '' : 'hide'"><!--我创建的群组-->
				<view v-for="(item,index) in list" :key="item.id" class="bgf m20" style="border-radius: 6px;">
					<view class="disf p20" @click="goPage" :data-uri="'/pages/group-details/group-details?group_id='+item.tencent_group_id">
						<view style="width: 90rpx;height: 90rpx;overflow: hidden;border-radius:4px;flex-shrink: 0;">
							<u-image width="94rpx" height="94rpx" :src="item.face_url">
								<template v-slot:error>
									<image src="/static/image/default-user.png" style="width:94rpx;height: 94rpx;"></image>
								</template>
							</u-image>
						</view>
						<view class="f28 ml10">
							<view class="f32">{{item.name}}({{item.MemberNum}})</view>
							<view class="mt10 col999 toell" style="width: 550rpx;">[{{item.classify_name}}]{{item.introduction ? item.introduction : '群主很懒什么也没有留下~'}}</view>
						</view>
					</view>
				</view>
				
				<view v-if="list.length <= 0 && not_load" style="text-align: center;margin-top: 40%;">
					<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
					<view class="f32 col999 mt20">什么都木有哦</view>
				</view>
				<pageload :page_load="page_load" :next_page="next_page" :list="list" /><!--分页加载状态-->
			</view><!--我创建的群组结束-->
			
			<view :class="current == 1 ?  '' : 'hide'"><!--申请入群列表-->
			  <view v-for="(item,index) in applicationList" :key="item.userID" class="bgf m20" style="border-radius: 6px;">
			  	<view class="disfr-lr p20 " >
			  		<view class="disf mr30">
			  			<view style="width: 90rpx;height: 90rpx;overflow: hidden;border-radius:50%;flex-shrink: 0;">
			  				<u-image width="94rpx" height="94rpx" :src="item.avatar">
			  					<template v-slot:error>
			  						<image src="/static/image/default-user.png" style="width:94rpx;height: 94rpx;"></image>
			  					</template>
			  				</u-image>
			  			</view>
			  			<view class="f28 ml10" style="width: 360rpx;">
			  				<view class="f32 toell">{{item.applicantNick}}</view>
			  				<view>群称:{{item.groupName}}</view>
							<view v-if="item.enter_group_num">该用户已加入<text class="f36" style="color:red;">{{item.enter_group_num}}</text>个管理员群聊</view>
			  			</view>
			  		</view>
			  		<view class="disf" style="line-height: 90rpx;">
			  			<view class="custom-min-button mr10 mt20" @click="agree" :data-item="item"
						style="border-radius: 4px; ">同意</view>
			  			<view class="custom-min-button mt20" @click="refuse" :data-item="item" :data-info="item.enter_group_num ? '你加入群聊数量过多' : ''"
						style="border-radius: 4px;background: red;">拒绝</view>	
			  		</view>
			  	</view>
			  </view>
			  <view v-if="applicationList.length <= 0 && not_load" style="text-align: center;margin-top: 40%;">
			  	<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
			  	<view class="f32 col999 mt20">什么都木有哦</view>
			  </view>
			</view><!--申请入群列表 结束-->
			
		</view>
		
		
	   <loading :loading="not_load"/><!--加载状态-->
	   <u-no-network tips="哎呀，网络信号丢失"></u-no-network><!--检测网络-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom,onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(true);
const page_load=ref(false);
const not_load=ref(false);
const next_page=ref('');
const list=ref([]);
const tagsList=ref([
	{name:'我的建群'},
	{name:'申请入群'}
	]);
const current=ref(0);
//切换
const tabsChange=(e)=>{
	next_page.value='';
	current.value=e;
	if(current.value == 1){
		getGroupApplication();
	}
};
// 拉取申请入群列表
const applicationList=ref([]);
const getGroupApplication=async()=>{
	not_load.value=false;
	let list =await uni.TIM.getGroupApplicationList();
	let group_ids=[];
	let user_ids=[];
	for(let i in list) {
		group_ids[i]=list[i].groupID;
		user_ids[i]=list[i].applicant;
	}
	let ret=await uni.$post('/appapi-config-getismanage',{},{tencent_group_id:group_ids,user_ids:user_ids});
	
	if(ret.data){
		for(let i in list){
			list[i].enter_group_num=ret.data[list[i].applicant] || 0;
		}
	}
	not_load.value=true;
	applicationList.value=list;
	//console.log(list);
};
//页面加载时
onLoad(async (options)=>{
    loadPage(options,false);
});
const connected=(res)=>{
	
};
//页面显示时执行
onShow(()=>{
	//console.log('语法糖onShow');
});
//页面隐藏时执行
onHide(()=>{
	//console.log('语法糖onHide');
});

/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage=async (options,isPage)=>{
	let ret = await uni.$get('/appapi-member-mycroup',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
    page_load.value=false;
	show_main.value=true;
	not_load.value=true;
	next_page.value=ret.data.next_page;
	if(isPage) list.value=[...list.value,...ret.data.list];
	else list.value=ret.data.list;
};
onPullDownRefresh(()=>{
	//console.log('onPullDownRefresh');
	//not_load.value=false;
	setTimeout(()=>{
		loadPage({},false);
		uni.stopPullDownRefresh();
	}, 1000);
});
//上拉触底加载分页
onReachBottom(()=>{
	if (!next_page.value) return;
	if (page_load.value) return;
	page_load.value=true;
	setTimeout(()=>{
	  loadPage(next_page.value, true); 
	},2000);
});
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	uni.$utils.dataSetPage(event);
};
const agree=async(e)=>{
	let item=e.currentTarget.dataset.item;
	uni.TIM.handleGroupApplication('Agree','',item,(data)=>{
		uni.$post('/appapi-config-entergroupnum',{},{tencent_group_id:item.groupID,user_id:item.applicant});
		getGroupApplication();
		uni.TIM.getGroupApplicationListCount();
	}); 
};
const refuse=(e)=>{
	let item=e.currentTarget.dataset.item;
	let info= e.currentTarget.dataset.info;
	info=info ? info : '';
	uni.TIM.handleGroupApplication('Reject',info,item,(data)=>{
		getGroupApplication();
		uni.TIM.getGroupApplicationListCount();
	});
};
</script>

<style  lang="scss">
	page {
		
	}
.fnow{color:#2979ff;}
.info-number{
	position: absolute;
	top:0;
	right: 90rpx;
	width: 42rpx;
	height: 42rpx;
	border-radius: 50%;
	line-height: 42rpx;
	text-align: center;
	font-size: 22rpx;
	background: red;
	color:red;
	color:#fff;
	z-index: 9999;
}
</style>
